<template  >
  <div id="componentDrag">
    <div class="flex h-full w-full flex-wrap">
      <div class="bg-red-300 w-full flex flex-wrap">
        <p class="w-full">预览区</p>
        <div 
          draggable="true" 
          v-for="item in blockList" 
          :key="item" 
          class="bg-light-500 m-20px w-100px h-60px leading-[60px]"
          @dragover.prevent
          @dragstart="dragStart($event, item)"
          @dragend="dragEnd($event, item)">
          {{item}}
        </div>
      </div>
      <div class="bg-yellow-200 w-full h-full" 
      @drop="showDrag($event)" 
      @dragover.prevent>
        展示区
        <div v-if="blockS.length == 0" class="bg-light-500 m-20px h-full leading-[100px] opacity-50 border-1px border-dashed border-dark-50">
          展示组件
        </div>
        <div v-else class="bg-light-500 m-20px h-full leading-[100px] opacity-50 border-1px border-dashed border-dark-50 flex flex-wrap">
          <div v-for="(item, index) in blockS" :key="item"
          draggable="true"
          @dragstart="showDragstart($event, index)"
          @dragenter="showDragenter($event, index)"
          class="m-20px w-90px h-60px leading-[60px] bg-green-300 justify-center">{{item}}</div>
        </div>
      </div>
    </div>
    <div class="m-20px">
      <button class="m-auto rounded-md bg-blue-400 w-25 text-light-600 p-2" @click="reset">重置</button>
    </div>
  </div>
</template>

<script setup lang="ts">
//组件拖拽
import { onBeforeMount,onBeforeUpdate, onMounted, onUpdated, onActivated, onDeactivated ,  reactive, ref } from 'vue';
let blockList = ref(['A','B','C','D','E','F']);
let blockS = ref<any[string]>([]);
let dargInfo = ref('');
let dargIndex = ref<number>(0);
let sort = ref<boolean>(false);
  console.log('componentDrag','created');
onBeforeMount(() => {
  console.log('componentDrag','onBeforeMount ');
});
onMounted(() => {
  console.log('componentDrag','onMounted');
});
onBeforeUpdate(() => {
  console.log('componentDrag','onBeforeUpdate');
});
onUpdated(() => {
  console.log('componentDrag','onUpdated');
});
onActivated(() => {
  console.log('componentDrag','onActivated');
});
const dragStart = (event: any, item: string) => {
  sort.value = false;
  dargInfo.value = item;
  // event.dataTransfer.setData("drag-info", item);//这里的参数只能为string类型
};
const dragEnd = (event: any, item: string) => {
  // event.dataTransfer.clearData();//拖拽事件结束，清除消息
};
const showDrag = (event: any) => {
  if (sort.value) {
    return;
  }
  blockS.value.push(dargInfo.value);
  // blockS.value.push(event.dataTransfer.getData("drag-info"));
};
const showDragstart = (event: any, index: number) => {
  sort.value = true;
  dargIndex.value = index;
};
const showDragenter = (event: any, index: number) => {
  if (dargIndex.value != index) {
    const source = blockS.value[dargIndex.value];
    blockS.value.splice(dargIndex.value, 1);
    blockS.value.splice(index, 0, source);
    dargIndex.value = index;
  }
};
const reset = () => {
  blockS.value = [];
};
</script>

<style scoped>
.dragR{
  flex-grow: 1;
}
</style>